<template>
  <div class="container">
    <a-table class="table" :rowKey="row => row.id" :pagination="pagination" :dataSource="list">
      <a-table-column title="用户ID" width="60px">
        <template slot-scope="row">
          <div>{{row.user_id}}</div>
        </template>
      </a-table-column>
      <a-table-column title="用户名" width="60px">
        <template slot-scope="row">
          <div><img :src="row.user.headimg" alt="用户头像">{{row.user.name}}</div>
        </template>
      </a-table-column>
  
      <a-table-column title="兑换时间" width="60px">
        <template slot-scope="row">
          <div>{{row.created_at}}</div>
        </template>
      </a-table-column>
      
      <a-table-column title="查看集换奖品列表" width="60px">
        <template slot-scope="row">
          <a @click="handleEditLog(row)">{{row.user_package_sku_ids}}</a>
        </template>
      </a-table-column>
      
    </a-table>

  <a-modal title="集换奖品列表" style="top: 100px;" :visible="isGiftSku" width="1200px"
         @cancel="isGiftSku = false" :footer="null">
  <GiftSkuList v-if="isGiftSku" :list_record="record_info" @cancel="isGiftSku = false"></GiftSkuList>
  </a-modal>
  </div>
  

</template>

<script>
  // import AttrEditor from "./components/AttrEditor"
  import GiftSkuList from './GiftSkuList.vue'

  export default {
    components: {
      GiftSkuList
    },
    data() {
      return {
        info: {},
        record_info: {},
        isGiftSku: false,
        list: [],
        page: 1,
        per_page: 10,
        total: 0,
      }
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total,
          onChange: (e) => {
            this.page = e
            // this.per_page = e.pageSize
            this.initList()
          }
        }
      }
    },
    props: {
      list_record: ''
    },
    created() {
      this.info = this.list_record
      this.initList();
    },
    mounted() {},
    watch: {},
    methods: {
      cancel() {
        this.$router.back(-1)
      },
      handleEditLog(row) {
        this.record_info = row
        this.isGiftSku = true
      },
      initList() {
        this.$http.get(`/kapaishes/${this.info.uuid}/gift-record`, {
          params: {
            gift_id: this.info.id,
            page: this.page,
            per_page: this.per_page,
          }
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .form-container {
    padding-bottom: 120px;
  }

  .container {
    .btn {
      margin-right: 30px;
    }
  }

  .tips-c {
    margin-bottom: 20px;
    font-weight: 500;
  }
  img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }
</style>
